import CommonLayout from '@/Layout/CommonLayout';
import { lazy } from 'react';
import { Navigate, useRoutes } from 'react-router-dom';
import { withSuspense } from './utils/withLoading';

const Home = lazy(() => import('@/pages/Home'));
const NotFound = lazy(() => import('@/pages/NotFound'));

const router = [
  {
    path: '/',
    element: <CommonLayout />,
    children: [
      { index: true, element: <Navigate to="/home" replace /> },
      {
        path: 'home',
        element: withSuspense(Home),
      },
    ],
  },
  {
    path: '404',
    element: withSuspense(NotFound),
  },
  {
    path: '*',
    element: <Navigate to="/404" replace />,
  },
];

export const useAppRoutes = () => {
  return useRoutes(router);
};

export default router;
